<template>
    <div>
        <div class="title">
            <span>优惠券通道定制</span>
        </div>

        <div class="container">
            <div class="itemBox">
                <div class="line">
                    <div class="lineitem">商户名</div>
                    <div class="lineitem">{{ merchantInfo.merchantName }}</div>
                </div>
                <div class="line">
                    <div class="lineitem">商户号</div>
                    <div class="lineitem">{{ merchantInfo.merchantNo }}</div>
                </div>
                <div class="line">
                    <div class="lineitem">通道类型</div>
                    <div class="lineitem">{{ merchantInfo.channelName }}</div>
                </div>
                <div class="line" v-if="mercpchTitles.mchIdTitle">
                    <div class="lineitem">{{mercpchTitles.mchIdTitle}}</div>
                    <div class="lineitem"><el-input class="inputsize" v-model="merchantInfo.mchId" placeholder=""></el-input></div>
                </div>
                <div class="line" v-if="mercpchTitles.mchKeyTitle">
                    <div class="lineitem">{{mercpchTitles.mchKeyTitle}}</div>
                    <div class="lineitem"><el-input class="inputsize" v-model="merchantInfo.mchKey" placeholder=""></el-input></div>
                </div>
                <div class="line" v-if="mercpchTitles.isvAppidTitle">
                    <div class="lineitem">{{mercpchTitles.isvAppidTitle}}</div>
                    <div class="lineitem"><el-input class="inputsize" v-model="merchantInfo.isvAppid" placeholder=""></el-input></div>
                </div>
                <div class="line" v-if="mercpchTitles.authTokenTitle">
                    <div class="lineitem">{{mercpchTitles.authTokenTitle}}</div>
                    <div class="lineitem"><el-input class="inputsize" v-model="merchantInfo.authToken" placeholder=""></el-input></div>
                </div>
                <div class="line" v-if="mercpchTitles.username">
                    <div class="lineitem">{{mercpchTitles.username}}</div>
                    <div class="lineitem"><el-input class="inputsize" v-model="merCpChCfg.username" placeholder=""></el-input></div>
                </div>
                <div class="line" v-if="mercpchTitles.password">
                    <div class="lineitem">{{mercpchTitles.password}}</div>
                    <div class="lineitem"><el-input class="inputsize" v-model="merCpChCfg.password" placeholder=""></el-input></div>
                </div>
                <div class="line" v-if="mercpchTitles.group">
                    <div class="lineitem">{{mercpchTitles.group}}</div>
                    <div class="lineitem"><el-input class="inputsize" v-model="merCpChCfg.group" placeholder=""></el-input></div>
                </div>
            </div>
                <div class="btnbox">
                    <el-button type="primary" style="margin-top:20px;" @click="updateBtn">修改</el-button>
                </div>
        </div>
    </div>
</template>

<script>
import { getCouponMerchantInfo, updateCouponMerchantInfo } from "@/api/api"
export default {

    data() {
        return {
            channelId: this.$route.query.channelId,
            merchantId: this.$route.query.merchantId,
            merchantInfo: {},
            mercpchTitles: {
                mchIdTitle: "通道商户号",
                mchKeyTitle: "通道商户秘钥",
                isvAppidTitle: "通道服务商appid",
                authTokenTitle: "通道应用授权令牌",
            },
            merCpChCfg: {},
        };
    },

    created() {
    if (this.channelId == 6) {
        this.mercpchTitles = {
            mchIdTitle: "核销渠道ID",
            mchKeyTitle: "签名密钥",
            authTokenTitle: "RSA公钥",
        }
    } else if (this.channelId == 8) {
        this.mercpchTitles = {
            mchIdTitle: "品诺门店ID",
            mchKeyTitle: "签名密钥",
            isvAppidTitle: "品诺门店标识",
            authTokenTitle: "密码加密私钥",
        }
    } else if (this.channelId == 10) {
        this.mercpchTitles = {
            mchIdTitle: "可伴客户ID",
            mchKeyTitle: "签名密钥",
            username: "可伴用户名",
            password: "可伴用户名密码",
            group: "可伴商户分组",
        }
    }
    this.getMerchantInfo()
  },

    methods: {
        async getMerchantInfo() {
            const res = await getCouponMerchantInfo(this.merchantId, this.channelId)
            if(res.code === 405) {
                sessionStorage.removeItem('token')
                this.$router.push('/login')
            } else {
                if(res.code === 200) {
                    this.merchantInfo = res.data
                    if (this.channelId == 10 && this.merchantInfo.authToken) {
                        this.merCpChCfg = JSON.parse(this.merchantInfo.authToken)
                    }
                } else {
                    this.$message.error(res.$message)
                }
            }
        },
        // 提交修改
        async updateBtn() {
            let obj = {
                id: this.merchantInfo.id,
                mchId: this.merchantInfo.mchId,
                mchKey: this.merchantInfo.mchKey,
                isvAppid: this.merchantInfo.isvAppid,
                authToken: this.merchantInfo.authToken
            }
            if (this.channelId == 10) {
                let bizContent = {
                    username: this.merCpChCfg.username,
                    password: this.merCpChCfg.password,
                    group: this.merCpChCfg.group
                }
                obj.authToken = JSON.stringify(bizContent);
            }
            const res = await updateCouponMerchantInfo(obj)
            if(res.code === 405) {
                sessionStorage.removeItem('token')
                this.$router.push('/login')
            } else {
                if(res.code === 200) {
                    this.$message.success('更新成功！')
                } else {
                    this.$message.error(res.$message)
                }
            }
        }
    },
};
</script>

<style lang='less' scoped>
.title {
  background: #fff;
  padding: 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.container {
  width: 100%;
  margin-bottom: 20px;
  box-sizing: border-box;
  flex-wrap: wrap;
  .itemBox {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 10px;
    .line {
      width: 50%;
      display: flex;
      font-size: 14px;
      line-height: 200%;
      margin-top: 5px;
      .lineitem:nth-child(1) {
        width: 30%;
        text-align: left;
      }
      .lineitem:nth-child(2) {
        width: 70%;
        text-align: left;
        color: #888888;
      }
      .inputsize{
          width: 65%;
      }
    }
  }
  .wxbox{
      margin: 10px 0;
      padding-bottom: 20px;
      border-bottom: 1px solid #eeeeee;
      .linebox{
          width: 100%;
          display: flex;
          flex-wrap: wrap;
           .line {
                width: 50%;
                display: flex;
                font-size: 14px;
                line-height: 200%;
                margin-bottom: 5px;
                .lineitem:nth-child(1) {
                    width: 30%;
                    text-align: left;
                }
                .lineitem:nth-child(2) {
                    width: 70%;
                    text-align: left;
                    color: #888888;
                }
                .inputsize{
                    width: 65%;
                }
            }
      }
     
    .tablebox{
        width: 100%;
        table{
            border-top: 1px solid #999;
            border-left: 1px solid #999;
            border-spacing: 0;
            tr{
                width: 100%;
                td{
                    padding: 5px 15px;
                    border-bottom: 1px solid #999;
                    border-right: 1px solid #999;
                    text-align: center;
                    .inputmini{
                        width: 33%;
                    }
                    input{
                        text-align: center !important;
                    }
                }
            }
        }
    }
  }
  .btnbox{
      width: 100%;
      text-align: center;
  }
}
</style>